import { h } from './common/h';
import { mount } from './common/mount';
import { patch } from './diff/patch';

// 1. 创建旧 VNode（列表：A → B → C → D，key 为唯一标识）
const oldVNode = h('ul', { class: 'list' }, [
  h('li', { style: { color: 'red' }, key: 'key-A' }, 'A'),
  h('li', { key: 'key-B' }, 'B'),
  h('li', { key: 'key-C' }, 'C'),
  h('li', { key: 'key-D' }, 'D'),
]);

// 2. 创建新 VNode（列表：D → A → E → C，模拟移动、新增、删除）
const newVNode = h('ul', { class: 'list-new' }, [
  h('li', { key: 'key-D' }, 'D'), // 旧尾 → 新首（移动）
  h('li', { style: { color: 'blue' }, key: 'key-A' }, 'A'), // 旧首 → 新二（属性更新）
  h('li', { key: 'key-E' }, 'E'), // 新增节点
  h('li', { key: 'key-C' }, 'C'), // 保留节点（B 被删除）
]);

// 3. 首次渲染旧 VNode
const container = document.getElementById('diff');
if (container) {
  mount(oldVNode, container);
} else {
  throw new Error('未找到 id 为 "diff" 的 DOM 元素');
}

// 4. 1 秒后执行 diff，更新为新 VNode
setTimeout(() => {
  patch(oldVNode, newVNode, document.getElementById('diff'));
}, 1000);
